import Pagination from '@/components/Pagination' // secondary package based on el-pagination
// 权限判断指令
import permission from '@/directive/permission/index.js'
import { getClubType, updateClubType, createClubType } from '@/api/clubType'

// 默认查询条件
const defaultListQuery = {
  page: 1,
  limit: 10,
  ordering: '-id'
}

const defaultForm = {
  id: undefined,
  name: undefined,
  is_active: true
}

export default {
  components: { Pagination },
  directives: { permission },
  filters: {
    activeTextFilter(type) {
      const typeMap = {
        true: '启用',
        false: '禁用'
      }
      return typeMap[type]
    },
    activeStyleFilter(status) {
      const statusMap = {
        true: 'success',
        false: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      total: 0,
      listQuery: Object.assign({}, defaultListQuery),
      dataList: [],
      dialogFormVisible: false,
      dialogStatus: '',
      dialogText: '',
      form: Object.assign({}, defaultForm),
      rules: {
        name: [{ required: true, message: '该项为必填项', trigger: 'blur' }]
      },
      listLoading: false
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getList()
    },

    // 获取表格数据
    getList() {
      this.listLoading = true
      getClubType(this.listQuery).then(res => {
        this.dataList = res.results
        this.total = res.count
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      })
    },

    // 点击启用或禁用事件
    changeActive(row, index) {
      const loading = this.$loading({
        lock: true,
        text: '正在处理',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const data = { is_active: !row.is_active }
      updateClubType(row.id, data).then(response => {
        loading.close()
        const message = row.is_active ? '禁用成功' : '启用成功'
        this.dataList[index].is_active = data.is_active
        this.$notify({
          title: '成功',
          message: message,
          type: 'success',
          duration: 2000
        })
      }).catch((error) => {
        loading.close()
        this.$notify({
          title: '失败',
          message: error.response.data,
          type: 'error',
          duration: 0
        })
      })
    },

    // 点击添加事件
    showCreateDialog() {
      this.form = Object.assign({}, defaultForm)
      this.dialogStatus = 'create'
      this.dialogText = '新增社团分类'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    // 新增分类
    createData() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '正在处理',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          createClubType(this.form).then(response => {
            loading.close()
            this.dataList.unshift(response)
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '新增成功',
              type: 'success',
              duration: 2000
            })
          }).catch((error) => {
            loading.close()
            this.$notify({
              title: '失败',
              message: error.response.data,
              type: 'error',
              duration: 0
            })
          })
        }
      })
    },

    // 点击编辑事件
    showUpdateDialog(row) {
      this.form = Object.assign({}, row)
      this.dialogStatus = 'update'
      this.dialogText = '编辑分类'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },

    // 更新分类
    updateData() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '正在处理',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          updateClubType(this.form.id, this.form).then(response => {
            loading.close()
            const index = this.dataList.findIndex(v => v.id === this.form.id)
            this.dataList.splice(index, 1, response)
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
          }).catch((error) => {
            loading.close()
            this.$notify({
              title: '失败',
              message: error.response.data,
              type: 'error',
              duration: 0
            })
          })
        }
      })
    }

  }
}
